<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>轱辘UI</title>
    <!-- <style>
        *{margin: 0; padding: 0; box-sizing: border-box;}
        img{max-width: 100%;}
        :root{
            --button-height: 32px;
            --font-size: 14px;
            --button-bg: white;
            --button-active-bg: #eee;
            --broder-radius: 4px;
            --color: #333;
            --broder-color: #999;
            --broder-color-hover: #666;
        }
        /* #app{
        } */
    </style>
    <style>
     .g-button{
    font-size: var(--font-size);
    height: var(--button-height);
    padding: 0 1em;
    border-radius: var(--broder-radius);
    border: 1px solid var(--broder-color);
    background: var(--button-bg);
    }
    .g-button:hover{
        border-color: var(--border-color-hover);
    }
    .g-button:active{
            background-color: var(--button-active-bg);
    }
    .g-button:focus{
        outline: none;
    }
    </style> -->
</head>
<body>
    <div id="app" style="padding: 100px;">
        <g-collapse :selected.sync="selectedTab" single>
            <g-collapse-item title="标题1" name="1">内容一</g-collapse-item>
            <g-collapse-item title="标题2" name="2">内容二</g-collapse-item>
            <g-collapse-item title="标题3" name="3">内容三</g-collapse-item>
        </g-collapse>
        {{selectedTab}}
    </div>         
    <script src="./src/app.js"></script>
    <script src="//at.alicdn.com/t/font_1681992_jxpadwmpurm.js"></script>
</body>
</html>
                


<!-- <div style="overflow: hidden; padding: 50px;">
        <g-popover position="bottom" >
            <template slot="content" slot-scope="{close}">
                <div>Popover内容</div>
                <g-button @click="close">关闭</g-button>
            </template>
                <g-button>点我</g-button>
        </g-popover>
        <g-popover position="top">
                <template slot="content">
                    <div>Popover内容</div>
                </template>
                <g-button>点我</g-button>
        </g-popover>
        <g-popover position="left">
                <template slot="content">
                    <div>Popover内容</div>
                </template>
                <g-button>点我</g-button>
        </g-popover>
        <g-popover position="right">
                <template slot="content">
                    <div>Popover内容</div>
                </template>
                <g-button>点我</g-button>
        </g-popover>
</div>

<div style="overflow: hidden; padding: 50px;">
        <g-popover position="bottom" trigger="hover">
            <template slot="content">
                <div>Popover内容</div>
            </template>
                <g-button>点我</g-button>
        </g-popover>
        <g-popover position="top" trigger="hover">
                <template slot="content">
                    <div>Popover内容</div>
                </template>
                <g-button>点我</g-button>
        </g-popover>
        <g-popover position="left" trigger="hover">
                <template slot="content">
                    <div>Popover内容</div>
                </template>
                <g-button>点我</g-button>
        </g-popover>
        <g-popover position="right" trigger="hover">
                <template slot="content">
                    <div>Popover内容</div>
                </template>
                <g-button>点我</g-button>
        </g-popover>
    </div> -->